<template lang="html">
  <div class="container" v-loading="loading">
      <div class="search">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-input class="form_input" v-model="searchText" placeholder="请输入订单编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
      </div>

      <div class="tables">
        <el-table :data="tableData" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
              <el-table-column prop="id" label="ID" align="center" width="60"></el-table-column>
              <el-table-column prop="orderSublistId" label="订单号" align="center" width="120"></el-table-column>
              <el-table-column prop="factoryName" label="工厂名称" align="center" width="150"></el-table-column>
              <el-table-column prop="content" label="内容" align="center"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" align="center" width="120"></el-table-column>
        </el-table>
        <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />
      </div>


  </div>
</template>

<script>
export default {
  data(){
    return {
      loading:false,
      searchText: '',
      tableData: [],
      currentPage: 1,
      totalPage: 100,
      pageSize: 10,
    }
  },
  created(){
    this.selectFactoryLogPage()
  },
  methods:{
    async selectFactoryLogPage(){
      this.loading = true;
      let res = await this.$http.selectFactoryLogPage({
        query: this.searchText,
        pageSize: this.pageSize,
        pageNumber: this.currentPage});
      this.tableData = res.data.rows;
      this.totalPage = res.data.total;
      this.pageSize = res.data.pageSize;
      this.tableData.forEach(item=>{
        if(item.createTime){
          item.createTime = this.formatTime(item.createTime);
        }
      })
      this.loading = false;
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.currentPage = e;
      this.selectFactoryLogPage();
    },
    formatTime(value) {
      if(!value) return '';
      let oDate = new Date(value);
      let h = oDate.getHours()<10?'0'+oDate.getHours():oDate.getHours();
      let m = oDate.getMinutes()<10?'0'+oDate.getMinutes():oDate.getMinutes();
      let s = oDate.getSeconds()<10?'0'+oDate.getSeconds():oDate.getSeconds();
      return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+h+':'+m//+':'+s;
    },
  }
}
</script>

<style lang="css" scoped>
/deep/.el-table .row_style{
  background-color: #f8f8f8 !important;
}
.search{
  margin-bottom: 10px;
}
.form i{
  font-style: normal;
  color: #FB3F3F;
}
.form  .form_item{
  display: flex;
  line-height: 40px;
}
.form .radio_box{
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;
}
.form  .form_item span{
  display: inline-block;
  width: 150px;
  text-align: right;
  padding-right: 20px;
}
</style>
